<template>
  <div class="examine">
    <div class="pectrue">
      <img style="height: 100%;width: 100%;" :src="imgUrl">
    </div>
    <el-form :model="examineData">
      <el-form-item label="退款原因:">
        <span>{{reason}}</span>
      </el-form-item>
      <el-form-item label="退款金额:">
        <el-input v-model="examineData.refundFee" size="mini" style="width: 60px;"></el-input> 元</p>
      </el-form-item>
      <el-form-item label="备注说明:">
        <el-input v-model="examineData.remark" size="mini" type="textarea" rows="2" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="退款审核">
        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio :label="1">同意退款</el-radio>
          <el-radio :label="0">拒绝退款</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <p style="color: red;" v-if="failShow">退款失败：{{failReason}}</p>

    <p style="text-align: center;">
      <el-button type="warning">取消</el-button>
      <el-button type="success" @click="confirm">确认</el-button>
    </p>

  </div>
</template>

<script>
  export default {
    name: 'examine',
    props: ['row'],
    data() {
      return {
        tableData: [],
        imgUrl: '',
        reason: '',
        radio: '',
        examineData: {},
        failReason: null,
        failShow: false
      }
    },
    mounted() {
      this.imgUrl = this.row.imgUrl;
      this.reason = this.row.reason;
      this.examineData.refundId = this.row.id;
    },
    methods: {
      changeRadio(e) {
        if(e == 1) {
          this.examineData.status = 'APPROVED'
        } else {
          this.examineData.status = 'REFUSE'
        }
      },
      confirm() {
        this.$axios({
          method: 'post',
          url: '/order/order-refund/audit-refund',
          data: this.$qs.stringify(this.examineData)
        }).then((res) => {
          if(res.code == 200) {
            this.$emit('closeDialog',false);
            this.$emit('refresh');
            this.$message.success('退款审核成功！')
          } else {
              this.failReason = res.desc;
              this.failShow = true;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .pectrue {
    border: 1px solid red;
    width: 200px;
    height: 300px;
    margin: 0 auto;
  }
  .el-form-item,
  .el-input {
    margin: 0;
    padding: 0;
  }
  .rea,
  .red {
    width: 300px;
    height: 50px;
    margin: 20px auto;
  }
  .red {
    text-align: center;
  }

</style>
